import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import echarts from 'echarts';
import "../../../node_modules/_echarts@3.8.5@echarts/dist/echarts.min.js"
import "../../../node_modules/_echarts@3.8.5@echarts/map/js/china.js"
@Component({
  selector: 'page-dashboard-tour',
  templateUrl: 'dashboard-tour.html'
})
export class DashboardTourPage {
nums:any;
  constructor(public navCtrl: NavController) {
this.nums=[
    {"name":"0"},
    {"name":"0"},
    {"name":"1"},
    {"name":"3"},
    {"name":"9"},
    {"name":"8"},
    {"name":"2"},
    {"name":"1"},
    {"name":"7"},
]
  }

  ionViewDidLoad() {
    this.showDistributeChart();
    this.showNewUser();
    this.showTraffic();
    this.showSalesvolume();
    this.showTicket();
    this.showGeneration();
    this.showTotalsales();
  }
  //智慧瓷都游客来源分布
  showDistributeChart(){
    let data = [
        {name: '衢州', value: 177},
        {name: '廊坊', value: 193},
        {name: '菏泽', value: 194},
        {name: '合肥', value: 229},
        {name: '武汉', value: 273},
        {name: '大庆', value: 279}
    ];
    let geoCoordMap = {
        '衢州':[118.88,28.97],
        '廊坊':[116.7,39.53],
        '菏泽':[115.480656,35.23375],
        '合肥':[117.27,31.86],
        '武汉':[114.31,30.52],
        '大庆':[125.03,46.58]
    };
    let distribute = echarts.init(document.getElementById("distributeChart"));
    let convertData =  (data => {
        let res = [];
        for (let i = 0; i < data.length; i++) {
            let geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    });

    let option = {
        backgroundColor: 'transparent',
        // title: {
        //     text: '全国主要城市空气质量',
        //     subtext: 'data from PM25.in',
        //     sublink: 'http://www.pm25.in',
        //     left: 'center',
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        tooltip : {
            trigger: 'item'
        },
        // legend: {
        //     orient: 'vertical',
        //     y: 'bottom',
        //     x:'right',
        //     data:['pm2.5'],
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: 'transparent',
                    borderColor: '#33CCFF'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series : [
            {
                name: 'pm2.5',
                type: 'scatter',
                zoom: 1.2, //放大，这里是关键，一定要放在 series中
                coordinateSystem: 'geo',
                data: convertData(data),
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ddb926'
                    }
                }
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                zoom: 1.2, //放大，这里是关键，一定要放在 series中
                coordinateSystem: 'geo',
                data: convertData(data.sort(function (a, b) {
                    return b.value - a.value;
                }).slice(0, 6)),
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f4e925',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            }
        ]
    };
    distribute.setOption(option);
  }
  //智慧瓷都每月新增用户数
  showNewUser(){
    let newUser = echarts.init(document.getElementById('newUser'));
    let option = {
      title : {
          text: '智慧瓷都每月新增用户数',
          textStyle: {
            color: '#fff'
        },
          x: 'center',
          top: '60%',
      },
      tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      series : [
          {
              name: '访问来源',
              type: 'pie',
              radius : '55%',
              center: ['50%', '30%'],
              data:[
                  {value:335, name:'直接访问'},
                  {value:310, name:'邮件营销'},
                  {value:234, name:'联盟广告'},
                  {value:135, name:'视频广告'},
                  {value:1548, name:'搜索引擎'}
              ],
              itemStyle: {
                  emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
    };
  newUser.setOption(option);
}


//客流量预测
showTraffic(){
    let Traffic = echarts.init(document.getElementById('Traffic'));
let option = {
    title: {
        text: '未来一周客流量预测',
        textStyle: {
            color: '#fff'
        },
         x: 'center',
          top: '85%',
    },
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '20%',
        top: '5%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['第1天','第2天','第3天','第4天','第5天','第6天','第7天'],
             axisLabel :{  
         interval:0 ,
         show: true,
         textStyle: {
                 color: '#fff'
            }  
          },
          axisLine:{  
                     lineStyle:{  
                          color:'#00CCFF',  
                          width:1,//这里是为了突出显示加上的  
                     }  
                    }  
        }
    ],
    yAxis : [
        {
            type : 'value',
             axisLabel :{  
         interval:0 ,
         show: true,
         textStyle: {
                 color: '#fff'
            }  
          },
          axisLine:{  
                     lineStyle:{  
                          color:'#00CCFF',  
                          width:1,//这里是为了突出显示加上的  
                     }  
                    }  
        }
    ],
    series : [
        {
            name:'预测旅游人数',
            type:'line',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {normal: {}},
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ],
     itemStyle: {
                    normal: {
                        color: '#99FFFF',
                        shadowBlur: 10,
                        shadowColor: '#99FFFF'
                    }
                },
};
Traffic.setOption(option);
}

//每月销售量

showSalesvolume(){
    let Salesvolume = echarts.init(document.getElementById('Salesvolume'));
    let option = {
    title : {
        text: '智慧瓷都每月售票量',
        textStyle: {
            color: '#fff'
        },
        x: 'center',
          top: '90%',
    },
    tooltip : {
        trigger: 'axis'
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    axisLabel :{  
         interval:0 ,
         show: true,
         textStyle: {
                 color: '#fff'
            }  
          }  ,
           axisLine:{  
                     lineStyle:{  
                          color:'#00CCFF',  
                          width:1,//这里是为了突出显示加上的  
                     }  
                    }  
    } 
    ],
    yAxis : [
        {
            type : 'value',
         axisLabel :{  
           interval:0 ,
           show: true,
           textStyle: {
                 color: '#fff'
            }  
          },
          axisLine:{  
                     lineStyle:{  
                          color:'#00CCFF',  
                          width:1,//这里是为了突出显示加上的  
                     }  
                    }  
        }
    ],
    series : [
        {
            name:'出票量',
            type:'bar',
            data:[6.0, 5.0, 9.0, 26.4, 28.7, 70.7, 125.6, 152.2, 48.7, 18.8, 6.0, 10.0],
            markPoint : {
                data : [
                    {name : '年最高', value : 152.2, xAxis: 7, yAxis: 153},
                    {name : '年最低', value : 5, xAxis: 1, yAxis: 5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ],
    itemStyle: {
                    normal: {
                        color: '#FFCC66',
                        shadowBlur: 10,
                        shadowColor: '#FFCC66'
                    }
                },
};
Salesvolume.setOption(option);
}

//每月售票金额
showTicket(){
    let Ticket = echarts.init(document.getElementById('Ticket'));
    let option = {
    title: {
        text: '智慧瓷都每月售票金额',
        x: 'center',
          top: '85%',
        textStyle: {
                 color: '#fff'
            }  
    },
    tooltip: {
        trigger: 'axis'
    },
  
    grid: {
        left: '3%',
        right: '4%',
        bottom: '20%',
        top:'5%',
        containLabel: true
    },
  
    xAxis: {
        type: 'category',
        boundaryGap: false,
         data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        axisLabel :{  
           interval:0 ,
           show: true,
           textStyle: {
                 color: '#fff'
            }  
          },
         axisLine:{  
                     lineStyle:{  
                          color:'#00CCFF',  
                          width:1,//这里是为了突出显示加上的  
                     }  
                    }  
    },
    yAxis: {
        type: 'value',
        axisLabel :{  
           interval:0 ,
           show: true,
           textStyle: {
                 color: '#fff'
            }  
          },
         axisLine:{  
                     lineStyle:{  
                          color:'#00CCFF',  
                          width:1,//这里是为了突出显示加上的  
                     }  
                    }  
    },
    series: [
        {
            name:'售票金额',
            type:'line',
            stack: '总量',
            data:[300,500,400,630,710,820, 932, 901, 934, 1290, 1330, 1320]
        }
    ],
itemStyle: {
                    normal: {
                        color: '#0099FF',
                        shadowBlur: 10,
                        shadowColor: '#0099FF'
                    }
                },
};
Ticket.setOption(option);
}

//年龄段分布
showGeneration(){
    let Generation = echarts.init(document.getElementById('Generation'));
    let option = {
        title : {
          text: '游客年龄段比例分布图',
          textStyle: {
            color: '#fff'
        },
          x: 'center',
          top: '90%',
      },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        y: 'center',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
        textStyle: {
            color: '#fff'
        },
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};
    Generation.setOption(option);
}

//每月销售总金额
showTotalsales(){
    let Totalsales = echarts.init(document.getElementById('Totalsales'));
    let option = {
    title : {
        text: '智慧瓷都每月销售总金额',
        textStyle: {
            color: '#fff'
        },
        x: 'center',
          top: '85%',
    },
    tooltip : {
        trigger: 'axis'
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    axisLabel :{  
         interval:0 ,
         show: true,
         textStyle: {
                 color: '#fff'
            }  
          }  ,
           axisLine:{  
                     lineStyle:{  
                          color:'#00CCFF',  
                          width:1,//这里是为了突出显示加上的  
                     }  
                    }  
    } 
    ],
    yAxis : [
        {
            type : 'value',
         axisLabel :{  
           interval:0 ,
           show: true,
           textStyle: {
                 color: '#fff'
            }  
          },
          axisLine:{  
                     lineStyle:{  
                          color:'#00CCFF',  
                          width:1,//这里是为了突出显示加上的  
                     }  
                    }  
        }
    ],
    series : [
        {
            name:'出票量',
            type:'bar',
            data:[30, 5.0, 20, 26.4, 28.7, 70.7, 125.6, 152.2, 48.7, 18.8, 28, 10.0],
            markPoint : {
                data : [
                    {name : '年最高', value : 152.2, xAxis: 7, yAxis: 153},
                    {name : '年最低', value : 5, xAxis: 1, yAxis: 5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ],
    itemStyle: {
                    normal: {
                        color: '#00CC66',
                        shadowBlur: 10,
                        shadowColor: '#00CC66'
                    }
                },
};
Totalsales.setOption(option);
}

}
